.container {
  height: calc(100% - 50px);

  .search-box {
    width: 100%;
    padding: 18px 18px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f7fa;
    background-color: #fff;

    .search-top-box {
      display: flex;
      width: 100%;
      justify-content: space-between;
      overflow: hidden;
      height: 60px;
      max-height: 200px;
      display: flex;
      flex-direction: row-reverse;

      .search-top-left-box {
        width: 90%;

        .form-width {
          width: 250px;
        }
      }

      .search-top-right-box {
        height: 40px;
        display: flex;
        align-items: center;
        white-space: nowrap;

        p {
          -webkit-touch-callout: none;
          /* iOS Safari */
          -webkit-user-select: none;
          /* Chrome/Safari/Opera */
          -khtml-user-select: none;
          /* Konqueror */
          -moz-user-select: none;
          /* Firefox */
          -ms-user-select: none;
          /* Internet Explorer/Edge */
          user-select: none;
          /* Non-prefixed version, currentlynot supported by any browser */
          cursor: pointer;
          white-space: nowrap;
          font-size: 14px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #3b75ff;
          margin-right: 30px;
        }
      }
    }
  }

  .table-box {
    height: calc(100% - 79px);
    overflow-y: auto;
    background-color: #fff;
  }
}

.role-main {
  .jump {
    color: #3b75ff;
    cursor: pointer;
    text-decoration: underline;
  }

  .role-info {
    ::v-deep .el-form-item {
      margin-right: 30px;
    }

    ::v-deep .el-form-item + .el-form-item {
      .el-form-item__content {
        width: 500px;
      }
    }
  }

  .perlabel::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }

  .perlabel {
    position: relative;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .permission-list {
    border: 1px solid #dde2ee;
    border-radius: 4px;
    max-height: 400px;
    overflow: auto;

    .el-checkbox-group {
      font-size: 14px;
    }

    .item-tr:last-child {
      border-bottom: unset;
    }

    .item-tr {
      border-bottom: 1px solid #dde2ee;
      display: flex;

      .item1-td {
        border-right: 1px solid #dde2ee;
        width: 100px;
        padding: 10px;
        display: flex;
        align-items: center;
      }

      .item2-td {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        position: relative;

        .item2-tr:last-child {
          border-bottom: unset;
        }

        .item2-tr {
          display: flex;
          border-bottom: 1px solid #dde2ee;

          .item2-td-main {
            border-right: 1px solid #dde2ee;
            width: 150px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            justify-content: center;

            .item2-td-name {
              width: 120px;
              overflow: hidden;
            }
          }
          .item3-td {
            width: 764px;
            // width: calc(100% - 600px);
            padding: 10px 15px 0;
            display: flex;
            flex-wrap: wrap;

            .item-fun {
              margin-right: 15px;
              margin-bottom: 10px;
              overflow: hidden;
            }
          }
          .item3-td-width {
            width: 914px;
          }
        }
      }
    }
  }
}
